<template>
  <div class="wrapper">
    <el-form ref="searchForm" :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="关键字查询">
        <el-input v-model="searchData.keywords" placeholder="ID/账号名/昵称/手机" clearable></el-input>
      </el-form-item>
      <el-form-item label="实名状态">
        <el-select v-model="searchData.authen_status" placeholder="选择状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="未提交" value="-1"></el-option>
          <el-option label="待审核" value="0"></el-option>
          <el-option label="审核通过" value="1"></el-option>
          <el-option label="审核失败" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch('searchForm')">查询</el-button>
      </el-form-item>
    </el-form>
  	<el-table :data="userList" :stripe="true" :border="true" :highlight-current-row="true">
  	  <el-table-column label="ID" prop="id"></el-table-column>
  		<el-table-column label="账号" prop="name"></el-table-column>
  		<el-table-column label="昵称" prop="nickname"></el-table-column>
  		<el-table-column label="手机" prop="phone"></el-table-column>
  		<el-table-column label="创建时间" prop="create_time"></el-table-column>
  		<el-table-column label="实名状态" prop="authen_status_text"></el-table-column>
  		<el-table-column label="状态" prop="status_text"></el-table-column>
  		<el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="'/user/edit/' + scope.row.id">
            <el-button size="mini">查看</el-button>
          </router-link>
          <el-button size="mini" @click="resetUserLoginPwd(scope.row)">重置登录密码</el-button>
          <el-button size="mini" @click="resetUserPayPwd(scope.row)">重置支付密码</el-button>
          <router-link :to="'/user/editUserRole/' + scope.row.id">
            <el-button size="mini">角色编辑</el-button>
          </router-link>
        </template>
      </el-table-column>
  	</el-table>
    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pageData.per_page"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'

  export default {
    data () {
      return {
        searchData: {
          keywords: '',
          authen_status: ''
        },
        rules: {}
      }
    },
    created () {
      this.getList()
    },
    computed: {
      ...mapState({
        userList: state => state.user.list,
        pageData: state => state.user.pageData
      })
    },
    methods: {
      // 获取用户列表
      async getList () {
        let payload = {
          page: this.pageData.current_page,
          list_rows: this.pageData.per_page,
          keywords: this.$route.query.keywords,
          authen_status: this.$route.query.authen_status
        }
        await this.$store.dispatch('user/getList', payload)
      },
      // 点击页面时，跳转到相应页面
      handleCurrentChange (val) {
        this.pageData.current_page = val
        this.getList()
      },
      // 重置登录密码
      resetUserLoginPwd (row) {
        this.$prompt('请输入密码', '提示', {
          inputType: 'password',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[0-9a-zA-Z]{8,16}$/,
          inputErrorMessage: '密码为8-16位的数字或字母'
        }).then(({ value }) => {
          let payload = {
            id: row.id,
            login_password: value,
            re_login_password: value
          }
          this.$store.dispatch('user/resetUserLoginPwd', payload)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      // 重置支付密码
      resetUserPayPwd (row) {
        this.$prompt('请输入支付密码', '提示', {
          inputType: 'password',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\d{6}$/,
          inputErrorMessage: '密码为6位数字'
        }).then(({ value }) => {
          let payload = {
            id: row.id,
            pay_password: value,
            re_pay_password: value
          }
          this.$store.dispatch('user/resetUserPayPwd', payload)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      // 点击查询按钮时
      onSearch (form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.$router.push({path: '/user/list', query: {keywords: this.searchData.keywords, authen_status: this.searchData.authen_status}})
            this.getList()
          }
        })
      }
    }
  }
  </script>
<style scoped lang="scss">
@import "../../../assets/scss/base.scss";
.wrapper {
  .el-table {
    table {
      tr {
        td {
          ul {
            li {
              label {
                display: inline-block;
                vertical-align: top;
                width: $label-w;
                height: $label-h;
                line-height: $label-h;
                text-align: right;
                padding-right: 10px;
              }
              span {
                display: inline-block;
                vertical-align: top;
                width: $label-w * 2;
                height: $label-h;
                line-height: $label-h;
              }
            }
          }
        }
      }
    }
  }
}
</style>

